<template>
  <div class="radar_chart_wrap">
    <div ref="refChart" class="Chart"></div>
    <div class="score-legend">
      <div class="legend-item">
        <span class="dot red"></span>
        <span>60分以下</span>
      </div>
      <div class="legend-item">
        <span class="dot orange"></span>
        <span>60 - 80分</span>
      </div>
      <div class="legend-item">
        <span class="dot blue"></span>
        <span>80 - 90分</span>
      </div>
      <div class="legend-item">
        <span class="dot green"></span>
        <span>90分以上</span>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "@/js/echarts";
export default {
  name: "RadarChart",
  methods: {
    clear() {},
    getScoreColor(score) {
      if (score >= 90) return "#52C41A"; // 绿色
      if (score >= 80) return "#436BFF"; // 蓝色
      if (score >= 60) return "#FA8C16"; // 橙色
      return "#FF4D4F"; // 红色
    },
    init(data, perfect = 100) {
      const option = {
        radar: {
          indicator: data.map((item) => ({
            name: item.name.trim() + " " + item.value + "分",
            max: perfect,
            color: this.getScoreColor(item.value),
          })),
          shape: "circle",
          axisName: {
            color: "#333",
          },
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: data.map((item) => parseFloat(item.value)),
                name: "Score",
                itemStyle: {
                  color: "#409EFF",
                },
                areaStyle: {
                  color: "rgba(64, 158, 255, 0.2)",
                },
                lineStyle: {
                  color: "#409EFF",
                },
              },
            ],
          },
        ],
      };
      this.$nextTick(() => {
        let myChart = echarts.init(this.$refs.refChart, "light");
        myChart.setOption(option);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.radar_chart_wrap {
  padding-left: 10px;

  .Chart {
    height: 300px;
    width: 800px;
  }

  .score-legend {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 20px;

    .legend-item {
      display: flex;
      align-items: center;

      .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
      }

      .red {
        background-color: #f56c6c;
      }
      .orange {
        background-color: #e6a23c;
      }
      .blue {
        background-color: #409eff;
      }
      .green {
        background-color: #67c23a;
      }
    }
  }
}
</style>
